<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <div class="box">
        <span class="er">X</span>
    </div>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <ul class="add"></ul>
    <script>
        var box = document.querySelector('.box ');
        // 节点包括nodeType,nodeName,nodeValue,页面中所有内容都可以看做为节点
        // 通过节点的父子兄关系操作，更简单
        var er = document.querySelector('.er');
        // 拿到父亲元素
        console.log(er.parentNode);
        // 拿到子节点
        var ul = document.querySelector('ul');
        // 此结果包括了换行，文本等节点，不仅是标签节点，可以通过nodeType的值来区分
        console.log(ul.childNodes);
        console.log(ul.childNodes.nodeType);
        // 此结果只获得标签节点
        console.log(ul.children);

        var ol = document.querySelector('ol');
        // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);

        // 兄弟节点
        var div = document.querySelector('div');
        // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // 2. nextElementSibling 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);

        // 创建节点和添加节点
        var li = document.createElement('li');
        var fu_ul = document.querySelector('.add');
        fu_ul.appendChild(li);

        // 删除节点 父.removechild(子)
        ol.removeChild(li);

    </script>
</body>
</html>